<template>
    <Layout>

        <div class="TopBanner">
            <div class="container">
                <el-row>
                    <el-col :span="24">
                        <div class="col-lg-12">
                            <p class="Banner-ti">数据驱动 智慧生活</p>
                            <h2 class="Banner-Zhong">为独特需求而生</h2>
                            <h2 class="Banner-Bot">定制化数据服务</h2>
                        </div>
                        <div class="col-lg-12">
                            <p class="Banner-Cul"><span>精雕细琢十载</span>|<span
                                    style="margin: 0px 2px;">API安全稳固</span>|<span>品质之选</span></p>
                        </div>
                        <div class="col-lg-12">
                            <div class="BannerBotBtn">
                                <button class="BannerBotBtn-1" @click="NowRegister">立即咨询</button>
                                <!-- <button class="BannerBotBtn-2" @click="NowRegister">立即注册</button> -->
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>



        <div class="ProductClass">
            <div class="container">
                <el-row>
                    <div class="row">
                        <div>
                            <p class="Strongtitle">强大、安全、稳定的产品及服务</p>
                        </div>
                    </div>
                </el-row>
                <el-row class="ProClassRowOne">
                    <el-col :span="24" style="display: flex;justify-content: space-between;align-items: center;">
                        <div>
                            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="Handselect">
                                <el-menu-item index="0">全部</el-menu-item>
                                <el-menu-item index="1">短信服务</el-menu-item>
                                <el-menu-item index="2">身份核验</el-menu-item>
                                <el-menu-item index="3">运营商</el-menu-item>
                                <el-menu-item index="4">银行卡</el-menu-item>
                            </el-menu>
                        </div>
                        <div style="margin-right: 20px;">
                            <el-dropdown trigger="click">
                                <span class="el-dropdown-link">
                                    默认<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>全部</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="10" style="margin: 20px 0 20px 0;">
                    <el-col :span="6" :xs="24" :sm="24" :md="6" :lg="6">
                        <div class="StrNewsLeft" v-if="activeIndex==0">
                            <p class="StrNews-1">API数据大促季</p>
                            <p class="StrNews-2">立即咨询 立享优惠</p>
                            <p class="StrNews-3">便宜不止一点</p>
                            <p class="StrNewsLeDel" @click="gotoxqing">查看详情</p>
                        </div>
                        <div class="StrNewsLeft1" v-if="activeIndex==1">
                            <p class="StrNews-1">API数据大促季</p>
                            <p class="StrNews-2">立即咨询 立享优惠</p>
                            <p class="StrNews-3">便宜不止一点</p>
                            <p class="StrNewsLeDel1" @click="gotoxqing">查看详情</p>
                        </div>
                        <div class="StrNewsLeft2" v-if="activeIndex==2">
                            <p class="StrNews-1">API数据大促季</p>
                            <p class="StrNews-2">立即咨询 立享优惠</p>
                            <p class="StrNews-3">便宜不止一点</p>
                            <p class="StrNewsLeDel2" @click="gotoxqing">查看详情</p>
                        </div>
                        <div class="StrNewsLeft3" v-if="activeIndex==3">
                            <p class="StrNews-1">API数据大促季</p>
                            <p class="StrNews-2">立即咨询 立享优惠</p>
                            <p class="StrNews-3">便宜不止一点</p>
                            <p class="StrNewsLeDel3" @click="gotoxqing">查看详情</p>
                        </div>
                        <div class="StrNewsLeft4" v-if="activeIndex==4">
                            <p class="StrNews-1">API数据大促季</p>
                            <p class="StrNews-2">立即咨询 立享优惠</p>
                            <p class="StrNews-3">便宜不止一点</p>
                            <p class="StrNewsLeDel4" @click="gotoxqing">查看详情</p>
                        </div>
                    </el-col>
                    <el-col :span="18">
                        <el-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" v-for="itemone in product"
                            :key="itemone.id" v-if="activeIndex==0">
                            <div class="ProClassRowTwo" @click="gotopro">
                                <div class="ProClsRowTwoTi">
                                    <img src="../../assets/images/banner/News1.png" alt="">
                                    <h4>{{ itemone.name }}</h4>
                                </div>
                                <p style="font-size: 12px;" class="ProClassRowContent">{{ itemone.title }}
                                </p>
                                <div class="ProClsRowMinTx">
                                    <span style="font-size: 8px;">{{ itemone.name2 }}</span>
                                    <span style="font-size: 8px;">{{ itemone.name3 }}</span>
                                </div>
                                <div class="MinMinBottom">
                                    付费
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" v-for="itemone in product1"
                            :key="itemone.id" v-if="activeIndex==1">
                            <div class="ProClassRowTwo" @click="gotopro">
                                <div class="ProClsRowTwoTi">
                                    <img src="../../assets/images/banner/News1.png" alt="">
                                    <h4>{{ itemone.name }}</h4>
                                </div>
                                <p style="font-size: 12px;" class="ProClassRowContent">{{ itemone.title }}
                                </p>
                                <div class="ProClsRowMinTx">
                                    <span style="font-size: 8px;">{{ itemone.name2 }}</span>
                                    <span style="font-size: 8px;">{{ itemone.name3 }}</span>
                                </div>
                                <div class="MinMinBottom">
                                    付费
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" v-for="itemone in product2"
                            :key="itemone.id" v-if="activeIndex==2">
                            <div class="ProClassRowTwo" @click="gotopro">
                                <div class="ProClsRowTwoTi">
                                    <img src="../../assets/images/banner/News1.png" alt="">
                                    <h4>{{ itemone.name }}</h4>
                                </div>
                                <p style="font-size: 12px;" class="ProClassRowContent">{{ itemone.title }}
                                </p>
                                <div class="ProClsRowMinTx">
                                    <span style="font-size: 8px;">{{ itemone.name2 }}</span>
                                    <span style="font-size: 8px;">{{ itemone.name3 }}</span>
                                </div>
                                <div class="MinMinBottom">
                                    付费
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" v-for="itemone in product3"
                            :key="itemone.id" v-if="activeIndex==3">
                            <div class="ProClassRowTwo" @click="gotopro">
                                <div class="ProClsRowTwoTi">
                                    <img src="../../assets/images/banner/News1.png" alt="">
                                    <h4>{{ itemone.name }}</h4>
                                </div>
                                <p style="font-size: 12px;" class="ProClassRowContent">{{ itemone.title }}
                                </p>
                                <div class="ProClsRowMinTx">
                                    <span style="font-size: 8px;">{{ itemone.name2 }}</span>
                                    <span style="font-size: 8px;">{{ itemone.name3 }}</span>
                                </div>
                                <div class="MinMinBottom">
                                    付费
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8" :xs="24" :sm="12" :md="8" :lg="8" v-for="itemone in product4"
                            :key="itemone.id" v-if="activeIndex==4">
                            <div class="ProClassRowTwo" @click="gotopro">
                                <div class="ProClsRowTwoTi">
                                    <img src="../../assets/images/banner/News1.png" alt="">
                                    <h4>{{ itemone.name }}</h4>
                                </div>
                                <p style="font-size: 12px;" class="ProClassRowContent">{{ itemone.title }}
                                </p>
                                <div class="ProClsRowMinTx">
                                    <span style="font-size: 8px;">{{ itemone.name2 }}</span>
                                    <span style="font-size: 8px;">{{ itemone.name3 }}</span>
                                </div>
                                <div class="MinMinBottom">
                                    付费
                                </div>
                            </div>
                        </el-col>
                    </el-col>
                </el-row>
                <!-- <el-row class="ChangeFenye">
                    <el-col :span="24">
                        <el-pagination background layout="prev, pager, next" :total="20">
                        </el-pagination>
                    </el-col>
                </el-row> -->
            </div>
        </div>

        <!-- 优势 -->
        <div class="Advantage">
            <div class="container">
                <el-row>
                    <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <div>
                            <h4 class="PlatAdtitle">平台优势</h4>
                        </div>
                    </el-col>
                    <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <div>
                            <h5 class="PlatAdnews">稳定·安全·可靠</h5>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="PlatAdMaxBoxs">
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="6">
                        <div class="PlatAdBoxO">
                            <img src="../../assets/images/banner/advanger1.png" alt="">
                            <h5 class="platAdh5">全球合规 与世界相连</h5>
                            <p class="platadP">执有正规电信牌照,快速抵达200+国家或地区的本地运营商，体验低延迟、高触达、广连接的全球通讯交互</p>
                        </div>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="6">
                        <div class="PlatAdBoxO">
                            <img src="../../assets/images/banner/advanger2.png" alt="">
                            <h5 class="platAdh5">快速到达 灵活多变</h5>
                            <p class="platadP">短信及语音推广到达率高，支持针对不同需求出具针对性通信解决方案,体验低延迟、高触达、广连接的全球通讯交互</p>
                        </div>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="6">
                        <div class="PlatAdBoxO">
                            <img src="../../assets/images/banner/advanger3.png" alt="">
                            <h5 class="platAdh5">轻松接入 智能交付</h5>
                            <p class="platadP">使用国际统-的API轻松集成到您的系统或 业务流程中，并支持国际通用协议接入</p>
                        </div>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="6">
                        <div class="PlatAdBoxO">
                            <img src="../../assets/images/banner/advanger4.png" alt="">
                            <h5 class="platAdh5">数据追踪 时实分析</h5>
                            <p class="platadP">可视化埋点全方位追踪转化数据，发送数据自动汇总简易明了，数据模块助力分析调整策略，实时数据统计</p>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <!-- 解决方案 -->
        <div class="SolutionBox">
            <div class="container">
                <el-row>
                    <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <div>
                            <h4 class="Solutionti">定制您专属解决方案</h4>
                        </div>
                    </el-col>
                    <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <div>
                            <h5 class="Solutionnews">全面的行业场景解决方案，助力企业发展</h5>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 30px;">
                    <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-tabs v-model="activeName">
                            <el-tab-pane label="通用" name="1">
                                <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                    <div class="SolutionCont">
                                        <h5 class="SoluContH5">解决方案</h5>
                                        <p class="SoluContP">
                                            不仅能够在多个领域内广泛应用，还能够有效解决许多类似的问题。大多经过了实际操作的检验，并显示出了它们的价值和效果。采用这些策略可以显著减少不必要的重复工作，提升工作效能，同时还能帮助人们更有效地面对和处理各种复杂挑战。
                                        </p>
                                        <div class="SoluContZx" @click="lijizixun">立即咨询</div>
                                    </div>
                                </el-col>
                            </el-tab-pane>
                            <el-tab-pane label="金融" name="3">
                                <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                    <div class="SolutionCont">
                                        <h5 class="SoluContH5">金融</h5>
                                        <p class="SoluContP">
                                            金融解决方案是指针对金融行业特定问题或需求而设计的一系列策略、方法和技术的集合，旨在提高金融机构的运营效率、降低风险、增强客户体验，并推动金融创新。
                                        </p>
                                        <div class="SoluContZx" @click="lijizixun">立即咨询</div>
                                    </div>
                                </el-col>
                            </el-tab-pane>
                            <el-tab-pane label="银行" name="4">
                                <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                    <div class="SolutionCont">
                                        <h5 class="SoluContH5">银行</h5>
                                        <p class="SoluContP">
                                            解决方案旨在提高操作效率、增强客户体验，并促进金融服务的创新，通过提供灵活、可扩展的接口，加快银行业务流程，促进银行与金融科技合作伙伴之间的合作，推动银行服务的创新发展。
                                        </p>
                                        <div class="SoluContZx" @click="lijizixun">立即咨询</div>
                                    </div>
                                </el-col>
                            </el-tab-pane>
                            <el-tab-pane label="保险" name="5">
                                <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                    <div class="SolutionCont">
                                        <h5 class="SoluContH5">保险</h5>
                                        <p class="SoluContP">
                                            提供了广泛的解决方案，从提升客户体验到增强内部运营效率，再到推动新产品和服务的创新。通过合理部署和管理API，保险公司不仅可以提升自身竞争力，还能更好地适应数字化时代的需求，为用户提供更加灵活、高效的保险服务。
                                        </p>
                                        <div class="SoluContZx" @click="lijizixun">立即咨询</div>
                                    </div>
                                </el-col>
                            </el-tab-pane>
                            <el-tab-pane label="法院" name="6">
                                <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                    <div class="SolutionCont">
                                        <h5 class="SoluContH5">法院</h5>
                                        <p class="SoluContP">
                                            提供多方面的解决方案，在通过技术手段提升司法系统的效率和透明度，广泛而有效的解决方案，从提升诉讼服务效率到增强司法透明度和公正性，再到保障数据安全等方面，通过合理部署和管理，API不仅能提升法院的数字化水平，还能为广大民众提供更加便捷、透明的司法服务。 
                                        </p>
                                        <div class="SoluContZx" @click="lijizixun">立即咨询</div>
                                    </div>
                                </el-col>
                            </el-tab-pane>
                        </el-tabs>
                    </el-col>

                </el-row>


            </div>
        </div>


        <!-- 客户评论 -->
        <!-- <div class="CustomerPeoper">
            <div class="container">
                <el-row>
                    <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24">
                        <div>
                            <h4 class="CustomerPeoperti">客户评论</h4>
                        </div>
                    </el-col>
                    <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24">
                        <div>
                            <h5 class="CustomerPeopernews">全球部署，助力客户拓展国际业务</h5>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12" :xs="24" :sm="24" :md="24" :lg="12">
                        <div class="CustomerPLe">
                            <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24">
                                <div class="CustomerPltOne">
                                    <img src="../../assets/images/banner/bank2.png" alt="">
                                    <p>聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。</p>
                                </div>
                            </el-col>
                            <el-col :span="24">
                                <div class="CustomerPltOne">
                                    <img src="../../assets/images/banner/bank2.png" alt="">
                                    <p>聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。</p>
                                </div>
                            </el-col>
                            <el-col :span="24">
                                <div class="CustomerPltOne">
                                    <img src="../../assets/images/banner/bank2.png" alt="">
                                    <p>聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。</p>
                                </div>
                            </el-col>
                            <el-col :span="24">
                                <div class="CustomerPltOne">
                                    <img src="../../assets/images/banner/bank2.png" alt="">
                                    <p>聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。</p>
                                </div>
                            </el-col>
                            <el-col :span="24">
                                <div class="CustomerPltOne">
                                    <img src="../../assets/images/banner/bank2.png" alt="">
                                    <p>聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。</p>
                                </div>
                            </el-col>

                        </div>
                    </el-col>
                    <el-col :span="12" :xs="24" :sm="24" :md="24" :lg="12">
                        <div class="CustomerPRi">
                            <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24">
                                <div class="CustomerPltTwo">
                                    <img src="../../assets/images/banner/bank2.png" alt="">
                                    <p>聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。
                                    </p>
                                </div>
                            </el-col>
                            <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24">
                                <div class="CustomerPltTwo">
                                    <img src="../../assets/images/banner/bank2.png" alt="">
                                    <p>聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。
                                    </p>
                                </div>
                            </el-col>
                            <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24">
                                <div class="CustomerPltTwo">
                                    <img src="../../assets/images/banner/bank2.png" alt="">
                                    <p>聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。聚台的人脸识别API高效、安全,满足我们平台企业客户的需求。
                                    </p>
                                </div>
                            </el-col>


                        </div>
                    </el-col>

                </el-row>
            </div>
        </div> -->


        <!-- 新闻资讯 -->
        <!-- <div class="Journalism">
            <div class="container">
                <el-row>
                    <el-col :span="24">
                        <div class="JournalismOne">
                            <p>新闻资讯</p>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="JournalismTwo">
                            <p>全球部署，助力客户拓展国际业务</p>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20" style="margin: 20px 0px;">
                    <el-col :span="7" :xs="24" :sm="12" :md="12" :lg="7">
                        <div class="JournaLeft">
                            <div class="JournaLeTo">
                                <img src="../../assets/images/banner/minbgc.png" alt="">
                                <p>企业动态</p>
                            </div>
                            <div class="JournaLeBo">
                                <img src="../../assets/images/banner/advanger1.png" alt="">
                                <h6>企业简介</h6>
                                <p>
                                    公司业务主要包括：短信群发、语音外呼、黑名单、人工智能、AI、大数据精准营销等，设有张家界分公司，业务遍布全国。公司作为领先的AI+大数据驱动科技创新企业，紧跟国内通讯业与数字化转型的浪潮，凭借深厚的技术实力和市场洞察力，在数据治理与智能化服务领域独树一帜,我们专注于为客户提供定制化、高标准的数据治理解决方案，和国内三大运营商以及微软、爱奇艺、QQ音乐、阿里云等建立长期合作伙伴关系。坚持合作共赢，与客户携手共创数字时代的辉煌未来。
                                </p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="6">
                        <div class="JournaCenter">
                            <el-col :span="24">
                                <div>
                                    <div class="JournaCeBiao">
                                        <img src="../../assets/images/banner/minbgc.png" alt="">
                                        <p>客户案例</p>
                                    </div>
                                    <div class="JournaCeNeiR">
                                        <div class="JouCeNeTop">
                                            <div>
                                                <h6 class="JouCe-1h6">24</h6>
                                                <p class="JouCe-p">2024.05</p>
                                            </div>
                                            <div class="JouCe-2">
                                                <i class="el-icon-arrow-right"></i>
                                            </div>
                                        </div>
                                        <h6 class="JouCeH6">东方有线</h6>
                                        <p>构建视频、语音、数据三网融合、有线无线相结合的综合业务体系，大力推进三网融合业务试点，将电信网、有线电视网、计算机通信网的功能融合在一张网上，走出了“三网融合”之路。</p>
                                    </div>
                                </div>
                                <div>
                                    <div class="JournaCeBiao">
                                        <img src="../../assets/images/banner/minbgc.png" alt="">
                                        <p>API百科</p>
                                    </div>
                                    <div class="JournaCeNeiR">
                                        <div class="JouCeNeTop">
                                            <div>
                                                <h6 class="JouCe-1h6">24</h6>
                                                <p class="JouCe-p">2024.06</p>
                                            </div>
                                            <div class="JouCe-2">
                                                <i class="el-icon-arrow-right"></i>
                                            </div>
                                        </div>
                                        <h6 class="JouCeH6">ChatGpt 微软API</h6>
                                        <p>通过该接口，开发者可以访问ChatGPT模型，并构建出具有自然语言处理能力的对话应用程序，如聊天机器人、虚拟助手等。</p>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="24">

                            </el-col>
                        </div>
                    </el-col>
                    <el-col :span="11" :xs="24" :sm="24" :md="24" :lg="11">
                        <div class="JournaRight">
                            <div class="JouRiBiao">
                                <img src="../../assets/images/banner/minbgc.png" alt="">
                                <p>行业咨询</p>
                            </div>
                            <el-col :span="24">
                                <div class="JourRiBot">
                                    <div class="JourRiBNoxa">
                                        <div class="JourRiBNoxa-1">
                                            <h6 class="JourRiBNoxa-1h6">24</h6>
                                            <p class="JourRiBNoxa-p">2024.07</p>
                                        </div>
                                        <div>
                                            <p>大数据通过提供强大的数据处理能力和灵活的应用方案,帮助企业有效的管理和利用海量的数据,从而提升业务效能和决策水平</p>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="24">
                                <div class="JourRiBot">
                                    <div class="JourRiBNoxa">
                                        <div class="JourRiBNoxa-1">
                                            <h6 class="JourRiBNoxa-1h6">24</h6>
                                            <p class="JourRiBNoxa-p">2024.05</p>
                                        </div>
                                        <div>
                                            <p style=" display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">大模型使用自然语言处理技术,如命名实体识别(NER)和关键词提取,从文本中识别重要的实体、事件、概念或关键词。确定哪些信息是值得提取和存储的,通常是与特定领域、主题或问题相关的信息。</p>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="24">
                                <div class="JourRiBot">
                                    <div class="JourRiBNoxa">
                                        <div class="JourRiBNoxa-1">
                                            <h6 class="JourRiBNoxa-1h6">24</h6>
                                            <p class="JourRiBNoxa-p">2024.04</p>
                                        </div>
                                        <div>
                                            <p>行业短信业务场景广泛应用于企业与用户间的通信，主要用于发送与业务相关的通知提醒和验证码等信息。</p>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                           
                            <el-col :span="24">
                                <div class="JourRiBot">
                                    <div class="JourRiBNoxa">
                                        <div class="JourRiBNoxa-1">
                                            <h6 class="JourRiBNoxa-1h6">24</h6>
                                            <p class="JourRiBNoxa-p">2024.03</p>
                                        </div>
                                        <div>
                                            <p class="ShenglueJour">
                                                黑名单业务是一项针对电子通讯领域中的骚扰电话问题,旨在保护用户免受不必要的打扰和欺诈的智能服务
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </div>
                    </el-col>
                </el-row>

            </div>
        </div> -->

        <!-- 合作伙伴 -->

        <div class="CoopePartner">
            <div class="container">
                <el-row>
                    <el-col :span="24">
                        <div>
                            <p class="CoopePartnerOne">合作伙伴</p>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div>
                            <p class="CoopePartnerTwo">全球部署，助力客户拓展国际业务</p>
                        </div>
                    </el-col>
                </el-row>

                <el-row class="CoopeMaxImgBox">
                    <!-- 第一 -->
                    <el-row :gutter="10" type="flex" justify="center" class="ImgMaxBoxs">
                        <el-col :xs="6" :sm="6" :md="6" :lg="4">
                            <div class="ImgLogoBox">
                                <img src="../../assets/images/banner/bank1.png" alt="">
                            </div>
                        </el-col>
                        <el-col :xs="6" :sm="6" :md="6" :lg="4">
                            <div class="ImgLogoBox">
                                <img src="../../assets/images/banner/bank2.png" alt="">
                            </div>
                        </el-col>
                        <el-col :xs="6" :sm="6" :md="6" :lg="4">
                            <div class="ImgLogoBox">
                                <img src="../../assets/images/banner/bank3.png" alt="">
                            </div>
                        </el-col>
                        <el-col :xs="6" :sm="6" :md="6" :lg="4">
                            <div class="ImgLogoBox">
                                <img src="../../assets/images/banner/bank4.png" alt="">
                            </div>
                        </el-col>
                    </el-row>
                    <!-- 第二 -->
                    <el-row :gutter="10" type="flex" justify="center" class="ImgMaxBoxs">
                        <el-col :xs="6" :sm="6" :md="6" :lg="3">
                            <div class="ImgLogoBox">
                                <img src="../../assets/images/banner/bank5.png" alt="">
                            </div>
                        </el-col>
                        <el-col :xs="6" :sm="6" :md="6" :lg="3">
                            <div class="ImgLogoBox">
                                <img src="../../assets/images/banner/bank6.png" alt="">
                            </div>
                        </el-col>
                        <el-col :xs="6" :sm="6" :md="6" :lg="3">
                            <div class="ImgLogoBox">
                                <img src="../../assets/images/banner/bank7.png" alt="">
                            </div>
                        </el-col>
                        <el-col :xs="6" :sm="6" :md="6" :lg="3">
                            <div class="ImgLogoBox">
                                <img src="../../assets/images/banner/bank8.png" alt="">
                            </div>
                        </el-col>
                    </el-row>
                    <!-- 第三 -->
                    <el-row :gutter="10" type="flex" justify="center" class="ImgMaxBoxs">
                        <el-col :xs="6" :sm="6" :md="6" :lg="4">
                            <div class="ImgLogoBox">
                                <img src="../../assets/images/banner/bank9.png" alt="">
                            </div>
                        </el-col><el-col :xs="6" :sm="6" :md="6" :lg="4">
                            <div class="ImgLogoBox">
                                <img src="../../assets/images/banner/bank10.png" alt="">
                            </div>
                        </el-col><el-col :xs="6" :sm="6" :md="6" :lg="4">
                            <div class="ImgLogoBox">
                                <img src="../../assets/images/banner/bank11.png" alt="">
                            </div>
                        </el-col><el-col :xs="6" :sm="6" :md="6" :lg="4">
                            <div class="ImgLogoBox">
                                <img src="../../assets/images/banner/bank12.png" alt="">
                            </div>
                        </el-col><el-col :xs="6" :sm="6" :md="6" :lg="4">
                            <div class="ImgLogoBox">
                                <img src="../../assets/images/banner/bank13.png" alt="">
                            </div>
                        </el-col>
                    </el-row>
                </el-row>
            </div>
        </div>


        <RegisterPage></RegisterPage>



    </Layout>
</template>

<script>
import Icon from '../../components/icon/Icon'

import Layout from '../../components/common/Layout'
import VueSlickCarousel from 'vue-slick-carousel'
import BlogPostMixin from '../../mixins/BlogPostMixin'
import Tab from '../../../src/components/elements/tab/Tab'
import RegisterPage from '../../components/register/register'
export default {
    name: 'Home',
    components: {
        Icon,
        Tab,
        RegisterPage,
        Layout,
        VueSlickCarousel
    },
    mixins: [BlogPostMixin],
    data() {
        return {
            activeName: '1',
            activeIndex: '0',
            // 全部
            product: [
                {
                    id: 1,
                    name: '验证码短信服务',
                    name2: '快速高效',
                    name3: '高到达率',
                    title: '通过短信方式发送包含特定验证码的短信到用户手机上，以验证用户身份的安全机制。'
                },
                {
                    id: 2,
                    name: '营销短信服务',
                    name2: '高速稳定',
                    name3: '高到达率',
                    title: '通过短信发送具有营销性质的信息到用户手机上，帮助企业推广产品、服务和活动的解决方案。'
                },
                {
                    id: 3,
                    name: '会员短信服务',
                    name2: '灵活多样',
                    name3: '范围广泛',
                    title: '通过短信方式针对注册会员发送的具有个性化和专属优惠信息的短信服务。'
                },
                {
                    id: 4,
                    name: '二要素核验',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '通过姓名和身份证号进行真实性和一致性的验证。'
                },
                {
                    id: 5,
                    name: '运营商三要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商核验实名的手机号、姓名、身份证三项是否一致。'
                },
                {
                    id: 6,
                    name: '运营商二要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商核验实名的手机号和姓名或者手机号和身份证号是否一致。'
                },
                {
                    id: 7,
                    name: '在网时长',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商查询手机号入网至今使用时间，判断号码的在网时长。'
                },
                {
                    id: 8,
                    name: '在网状态',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商查询号码的使用状态，在网/销号/停机/关机等。'
                },
                {
                    id: 9,
                    name: '二次放号',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商查询号码是否为运营商回收后重新放出来的号码，根据手机号码查询手机是否经过二次放号。'
                },
                {
                    id: 10,
                    name: '携号转网',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '查询手机号的实际所属运营商，如果是携转后的号码则查询到转入的运营商。'
                },
                {
                    id: 11,
                    name: '归属地查询',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '查询手机号的开户地区。'
                },
                {
                    id: 12,
                    name: '空号检测',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '查询手机号的开户地区。'
                },
                {
                    id: 13,
                    name: '银行卡三要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向银行机构去核验银行卡是否为该姓名身份证身份信息所有。'
                },
                {
                    id: 14,
                    name: '银行卡四要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向银行核验银行卡是否为该姓名身份证身份信息所有，手机号是否为该银行卡预留绑定的手机号。'
                },
                {
                    id: 15,
                    name: '银行卡五要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向银行核验银行卡号、手机号、身份证号、姓名、银行账户类别，判断信息是否匹配。'
                },
            ],
            product1: [
            {
                    id: 1,
                    name: '验证码短信服务',
                    name2: '快速高效',
                    name3: '高到达率',
                    title: '通过短信方式发送包含特定验证码的短信到用户手机上，以验证用户身份的安全机制。'
                },
                {
                    id: 2,
                    name: '营销短信服务',
                    name2: '高速稳定',
                    name3: '高到达率',
                    title: '通过短信发送具有营销性质的信息到用户手机上，帮助企业推广产品、服务和活动的解决方案。'
                },
                {
                    id: 3,
                    name: '会员短信服务',
                    name2: '灵活多样',
                    name3: '范围广泛',
                    title: '通过短信方式针对注册会员发送的具有个性化和专属优惠信息的短信服务。'
                },
            ],
            product2: [
            {
                    id: 4,
                    name: '二要素核验',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '通过姓名和身份证号进行真实性和一致性的验证。'
                },
            ],
            product3: [
            {
                    id: 5,
                    name: '运营商三要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商核验实名的手机号、姓名、身份证三项是否一致。'
                },
                {
                    id: 6,
                    name: '运营商二要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商核验实名的手机号和姓名或者手机号和身份证号是否一致。'
                },
                {
                    id: 7,
                    name: '在网时长',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商查询手机号入网至今使用时间，判断号码的在网时长。'
                },
                {
                    id: 8,
                    name: '在网状态',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商查询号码的使用状态，在网/销号/停机/关机等。'
                },
                {
                    id: 9,
                    name: '二次放号',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商查询号码是否为运营商回收后重新放出来的号码，根据手机号码查询手机是否经过二次放号。'
                },
                {
                    id: 10,
                    name: '携号转网',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '查询手机号的实际所属运营商，如果是携转后的号码则查询到转入的运营商。'
                },
                {
                    id: 11,
                    name: '归属地查询',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '查询手机号的开户地区。'
                },
                {
                    id: 12,
                    name: '空号检测',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '查询手机号的开户地区。'
                },
            ],
            product4:[
            {
                    id: 13,
                    name: '银行卡三要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向银行机构去核验银行卡是否为该姓名身份证身份信息所有。'
                },
                {
                    id: 14,
                    name: '银行卡四要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向银行核验银行卡是否为该姓名身份证身份信息所有，手机号是否为该银行卡预留绑定的手机号。'
                },
                {
                    id: 15,
                    name: '银行卡五要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向银行核验银行卡号、手机号、身份证号、姓名、银行账户类别，判断信息是否匹配。'
                },
            ]
        }
    },
    methods: {
        Handselect(index){
            this.activeIndex = index
        },
        lijizixun() {
            this.$router.push({
                path: '/seekadfrom'
            })
        },
        ShowNow() {
            this.$router.push({
                path: '/product'
            })
        },
        NowRegister() {
            this.$router.push({
                path: '/seekadfrom'
            })
        },
        gotopro() {
            this.$router.push({
                path: '/product'
            })
        },
        gotoxqing(){
            this.$router.push({
                path: '/seekadfrom'
            })
        }
    },
}
</script>

<style scoped>
/* 统一样式 */
:root {
    --StrongBgc: #eef1f6;

}

/* banner图 */
.TopBanner {
    width: 100%;
    margin: 0 auto;
    color: #fff;
    /* height: 80vh; */
    /* background-color: #ccc; */
    background-image: url('../../assets/images/banner/HomeBan.png');
    background-size: 100% 100%;

    .Banner-ti {
        margin-top: 5%;
        font-family: serif;
        /* font-size: 5rem; */
        font-size: 48px;

    }

    .Banner-Zhong {
        margin: 5px 0px;
        font-size: 68px;
        font-weight: 700;
    }

    .Banner-Bot {
        font-weight: 400;
        font-size: 68px;
        margin-bottom: 20px;
    }

    .Banner-Cul {
        margin-bottom: 4%;
        font-size: 20px;
    }


    .BannerBotBtn {
        display: flex;
        margin-bottom: 28%;

        .BannerBotBtn-1 {
            width: 160px;
            border: 2px solid #62C3D0;
            /* border: 3px solid transparent; */
            color: #62C3D0;
            font-size: 20px;
            border-radius: 3px;
            font-weight: 600;
            margin: 0px 10px 0px 0px;
            height: 59px;
            background-color: transparent;
        }

        .BannerBotBtn-2 {
            width: 160px;
            border: 2px solid #e30083;
            color: #fff;
            font-size: 20px;
            border-radius: 3px;
            font-weight: 600;
            height: 59px;

            margin: 0px 5px 0px 0px;
            background-color: #e30083;
        }
    }

    @media screen and (max-width: 1200px) {
        .Banner-ti {
            margin-top: 5%;
            font-family: serif;
            font-size: 32px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 52px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 52px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 16px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 140px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 18px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 50px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 140px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 18px;
                border-radius: 3px;
                font-weight: 600;
                height: 50px;

                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }
    }


    @media screen and (max-width: 768px) {
        .Banner-ti {
            margin-top: 5%;
            font-family: serif;
            font-size: 20px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 36px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 40px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 14px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 100px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 14px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 40px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 100px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 14px;
                border-radius: 3px;
                font-weight: 600;
                height: 40px;
                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }

    }

    @media screen and (max-width: 500px) {
        .Banner-ti {
            margin-top: 8%;
            font-family: serif;
            font-size: 16px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 20px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 30px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 12px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 80px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 12px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 30px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 80px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 12px;
                border-radius: 3px;
                font-weight: 600;
                height: 30px;
                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }

    }


}




/* tab格式 */
.el-menu.el-menu--horizontal {
    border-bottom: none;
    background-color: #eef1f6;
    color: #000;
}

.el-menu--horizontal>.el-menu-item {
    color: #000;
}

.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover {
    background-color: var(--StrongBgc);
    transition: all 0.3s ease;

}

.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus {
    background-color: var(--StrongBgc);
    /* font-size: 16px; */
}

.el-menu--horizontal>.el-menu-item.is-active {
    color: #2966FF;
    font-size: 20px;
    border-bottom: 2px solid #2966FF;
}

.el-menu--horizontal>.el-menu-item {
    padding: 0px 5px;
    margin: 0px 10px;
    height: 50px;
    line-height: 50px;
}



/* 优势 */
.Advantage {
    width: 100%;
    margin: 0 auto;
    background-color: #F3F6FB;
    overflow: hidden;

    .PlatAdtitle {
        text-align: center;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 42px;
        color: #3D3D3D;
        margin-top: 40px;
        box-sizing: border-box;

    }

    .PlatAdnews {
        text-align: center;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 20px;
        color: #7E7E7E;
        margin-top: 15px;
    }

    .PlatAdMaxBoxs {
        margin: 70px 0px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .PlatAdBoxO {
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        background-color: #fff;
        overflow: hidden;
        border-radius: 10px;
        padding: 0px 20px;
        margin: 10px 0px;

        img {
            /* width: 90%; */
            margin: 20px 0px;
            transition: all 0.5s ease; /* 设置平滑过渡效果 */
            transform: scale(1); /* 初始状态不放大 */
        }
        img:hover {
            transform: scale(1.05);
            transition: all 0.5s ease;
        }

        .platAdh5 {
            font-size: 20px;
            color: #3D3D3D;
            margin: 15px 0px;
        }

        .platadP {
            height: 71px;
            color: #7E7E7E;
            color: 16px;
            text-align: center;
            margin-bottom: 10px;
        }
    }
}

/* 优势 */

/* 解决方案 */
.SolutionBox {
    width: 100%;
    margin: 0 auto;
    background-color: #2D3454;
    overflow: hidden;

    .Solutionti {
        text-align: center;
        margin-top: 40px;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 700;
        font-size: 36px;
        color: #FFFFFF;
        margin-top: 71px;
    }

    .Solutionnews {
        margin-top: 9px;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 20px;
        color: rgba(255, 255, 255, 0.6);
        text-align: center;

    }

    /deep/ .el-tabs__nav-scroll {
        display: flex;
        align-items: center;
        justify-items: center;
        text-align: center;
        transition: 0.3s ease;
    }

    /deep/ .el-tabs__nav {
        margin: 0px auto;
        transition: 0.3s ease;
    }

    /deep/ .el-tabs__item {
        color: #fff;
        font-size: 16px;
        transition: 0.3s ease;

    }
    /deep/ .el-tabs__item:hover {
        color: #0457F2;
        font-size: 20px;
        transition: 0.3s ease;
    }

    /deep/ .el-tabs__nav-wrap::after {
        height: 0px;
    }

    /deep/ .el-tabs__item.is-active {
        color: #0457F2;
        font-size: 20px;
        transition: 0.3s ease;
    }
    
    /deep/ .el-tabs__active-bar {
        background-color: #0457F2;
        transition: 0.3s ease;
    }

    .SolutionCont {
        width: 100%;
        height: 300px;
        margin: 20px 0px 50px 0px;
        background-image: url('../../assets/images/banner/solutioncont.png');
        background-size: 100% 100%;
        box-sizing: border-box;
        overflow: hidden;

        .SoluContH5 {
            margin: 40px 0px 20px 8%;
            font-size: 26px;
            color: #fff;
            font-weight: 700;
        }

        .SoluContP {
            width: 360px;
            height: 118px;
            margin: 0px 0px 10px 8%;
            font-weight: 400;
            font-size: 14px;
            color: #D8D8D8;
            display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5; /* 显示的行数 */
  overflow: hidden;
        }

        .SoluContZx {
            width: 120px;
            height: 46px;
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #FFFFFF;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0px 0px 10px 8%;
            cursor: pointer;
        }
    }
}

/* 解决方案 */

/* 客户评论 */
.CustomerPeoper {
    width: 100%;
    margin: 0 auto;
    background-color: #FAFAFA;
    overflow: hidden;

    .CustomerPeoperti {
        text-align: center;
        margin-top: 40px;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 700;
        font-size: 36px;
        color: #3D3D3D;
        margin-top: 71px;
    }

    .CustomerPeopernews {
        margin-top: 9px;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 18px;
        color: #7E7E7E;
        text-align: center;
        margin-bottom: 20px;
    }

    .CustomerPLe {
        overflow: hidden;

        .CustomerPltOne {
            height: 110px;
            display: flex;
            align-items: center;
            background-color: #fff;
            padding: 10px 20px;
            border-radius: 10px;
            margin: 10px 0px;

            /* justify-content: space-between; */
            img {
                width: 164px;
                margin: 0px 10px 0px 0px;
            }

            p {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                /* 控制显示的行数 */
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }

    }

    .CustomerPRi {
        overflow: hidden;

        .CustomerPltTwo {
            height: 184px;
            display: flex;
            align-items: left;
            flex-direction: column;
            background-color: #fff;
            padding: 10px 20px;
            border-radius: 10px;
            margin: 10px 0px;

            img {
                width: 164px;
                margin: 0px 10px 0px 0px;
            }

            p {
                display: -webkit-box;
                -webkit-line-clamp: 4;
                /* 控制显示的行数 */
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
    }

}

/* 客户评论 */




/* 新闻资讯 */
.Journalism {
    background-image: url('../../assets/images/banner/Journalism.png');

    .JournalismOne {
        p {
            margin: 50px 0px 10px 0px;
            font-weight: 500;
            font-size: 42px;
            color: #3D3D3D;
            text-align: center;

        }
    }

    .JournalismTwo {
        p {
            font-weight: 500;
            font-size: 18px;
            color: #7E7E7E;
            text-align: center;
        }
    }

    .JournaLeft {
        overflow: hidden;
        box-sizing: border-box;

        /* height: 500px; */
        .JournaLeTo {
            display: flex;

            img {
                height: 20px;
            }

            p {
                font-size: 16px;
                color: #3D3D3D;
                margin: 0px 5px;
            }
        }

        .JournaLeBo {
            background-color: #fff;
            box-shadow: 0px 0px 5px #ccc;

            border-radius: 5px;
            padding: 20px 20px;
            margin: 10px 0px;

            img {
                width: 100%;
                transform: scale(1);
                transition: all 0.5s ease;
            }
            img:hover {
                transform: scale(1.05);
                transition: all 0.5s ease;
            }

            h6 {
                color: #3D3D3D;
                font-size: 18px;
                margin: 15px 0px;
            }

            p {
                font-weight: 400;
                font-size: 12px;
                color: #3D3D3D;
                display: -webkit-box;
                -webkit-line-clamp: 8;
                /* 控制显示的行数 */
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
    }

    .JournaCenter {
        height: 500px;

        .JournaCeBiao {
            display: flex;

            img {
                height: 20px;
            }

            p {
                font-size: 16px;
                color: #3D3D3D;
                margin: 0px 5px;
            }

        }

        .JournaCeNeiR {
            height: 200px;
            margin: 10px 0px;
            background-color: #fff;
            box-shadow: 0px 0px 5px #dfdcdc;
            border-radius: 5px;
            padding: 15px;

            .JouCeNeTop {
                border-bottom: 2px solid #D8D8D8;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .JouCe-1h6 {
                    font-size: 20px;
                    margin: 0px 0px 10px 0px;
                }

                .JouCe-p {
                    font-size: 14px;
                    color: #3D3D3D;
                    margin: 0px 0px 10px 0px;

                }

            }

            .JouCeH6 {
                color: #3D3D3D;
                font-size: 18px;
                margin: 10px 0px;
            }

            p {
                font-size: 12px;
                color: #3D3D3D;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                /* 控制显示的行数 */
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
    }

    .JournaRight {
        height: 500px;

        /* background-color: pink; */

        .JouRiBiao {
            display: flex;

            img {
                height: 20px;
            }

            p {
                font-size: 16px;
                color: #3D3D3D;
                margin: 0px 5px;
            }


        }

        .JourRiBot {
            /* height: 200px; */
            margin: 10px 0px;
            background-color: #fff;
            box-shadow: 0px 0px 5px #dfdcdc;
            border-radius: 5px;
            padding: 20px;
        }

        .JourRiBNoxa {
            display: flex;

            .JourRiBNoxa-1 {
                margin-right: 20px;
            }

            .JourRiBNoxa-1h6 {

                font-size: 20px;
            }

            .JourRiBNoxa-p {
                font-size: 14px;
                color: #3D3D3D;
                /* margin: 0px 0px 10px 0px; */
            }

            .ShenglueJour {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                /* 控制显示的行数 */
                -webkit-box-orient: vertical;
                overflow: hidden;
                color: 14px;
                color: #3D3D3D;
            }
        }
    }
}


/* 新闻资讯 */

/* 合作伙伴 */
.CoopePartner {
    width: 100%;
    margin: 0 auto;
    background-color: #FAFAFA;
    overflow: hidden;

    .CoopePartnerOne {
        text-align: center;
        margin-top: 40px;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 700;
        font-size: 36px;
        color: #3D3D3D;
        margin-top: 71px;
    }

    .CoopePartnerTwo {
        margin-top: 9px;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 18px;
        color: #7E7E7E;
        text-align: center;
        margin-bottom: 20px;
    }

    .ImgMaxBoxs {
        margin: 20px 0px;
        flex-wrap: wrap;
    }

    .CoopeMaxImgBox {
        margin: 10px 0px 40px 0px;
    }

    .ImgLogoBox {
        width: 100%;

        img {
            height: 70px;
            cursor: pointer;
            transform: scale(1);
           transition:all 1s ease; 
        }

        img:hover {
            cursor: pointer;
           transform: scale(1.1);
           transition:all 1s ease; 
        }
    }
}

/* 合作伙伴 */


/* 注册 */
.ZhuCeBoxs {
    width: 100%;
    margin: 0 auto;
    background-image: url('../../assets/images/banner/RegisterBgc.png');
    background-size: 100% 100%;
    overflow: hidden;

    .ZhuCeTitleOne {
        p {
            text-align: center;
            margin-top: 190px;
            font-weight: 500;
            font-size: 22px;
            color: #FFFFFF;
        }
    }

    .ZhuCeTitleTwo {
        p {
            text-align: center;
            font-weight: 500;
            font-size: 48px;
            color: #FFFFFF;
        }

    }

    .ZhuCeTitleThree {
        p {
            text-align: center;
            font-weight: 700;
            font-size: 20px;
            color: #fff;
            margin-top: 20px 0px;
        }
    }
}

.register-box {
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: center;
    margin: 50px 0px;
    box-sizing: border-box;
    margin-bottom: 120px;

}

.ZhuCeTitleFour {
    margin: 40px 0px 110px 0px;
    box-sizing: border-box;
}

.register-box-content {
    margin: 0 auto;
    position: relative;
    height: 50px;

    .register-input {
        /* width: 200px; */
        height: 40px;
        border-radius: 30px;
        border: 1px solid #cccccc;
        font-size: 12px;
        background-color: #fff;

    }

    .LjRegister {
        width: 40%;
        border: none;
        color: #fff;
        height: 38px;
        font-size: 16px;
        background-color: #61c3d0;
        border-radius: 30px;
        position: absolute;
        right: 0px;
        top: 1px;
    }
}

.ProductClass {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;

    .ProClassRowOne {
        margin: 30px auto;
    }

    .StrNewsLeft {
        width: 100%;
        background-image: url('../../assets/images/banner/dbannerle.png');
        background-size: 100% 100%;
        height: 990px;
        border: 1px solid #ccc;
        transition: all 1s ease;
        .StrNews-1 {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 32px;
            color: #FFFFFF;
            margin: 27px 0px 0px 31px;
            box-sizing: border-box;
        }
        .StrNews-2 {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 700;
            font-size: 26px;
            color: #FFFFFF;
            margin: -17px 0px 0px 31px;
        }
        .StrNews-3 {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 20px;
            color: #FFFFFF;
            margin: 17px 0px 0px 31px;
        }

        .StrNewsLeDel {
            width: 69px;
            height: 22px;
            line-height: 22px;
            font-weight: 400;
            font-size: 12px;
            margin: 31px 0px 0px 31px;
            background-color: #62c3d0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            color: #FFFFFF;
        }
    }
    .StrNewsLeft1 {
        width: 100%;
        background-image: url('../../assets/images/banner/bannerle.png');
        background-size: 100% 100%;
        height: 240px;
        border: 1px solid #ccc;
        transition: all 1s ease;
        .StrNews-1 {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 32px;
            color: #FFFFFF;
            margin: 27px 0px 0px 31px;
            box-sizing: border-box;
        }
        .StrNews-2 {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 700;
            font-size: 26px;
            color: #FFFFFF;
            margin: -17px 0px 0px 31px;
        }
        .StrNews-3 {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 20px;
            color: #FFFFFF;
            margin: 17px 0px 0px 31px;
        }

        .StrNewsLeDel1 {
            width: 69px;
            height: 22px;
            line-height: 22px;
            font-weight: 400;
            font-size: 12px;
            margin: 31px 0px 0px 31px;
            background-color: #62c3d0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            color: #FFFFFF;
        }
    }
    .StrNewsLeft2 {
        width: 100%;
        background-image: url('../../assets/images/banner/bannerle.png');
        background-size: 100% 100%;
        height: 240px;
        /* height: 100%; */
        border: 1px solid #ccc;
        transition: all 1s ease;
        /* transform: scale(1.1); */
        .StrNews-1 {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 32px;
            color: #FFFFFF;
            margin: 27px 0px 0px 31px;
            box-sizing: border-box;
        }
        .StrNews-2 {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 700;
            font-size: 26px;
            color: #FFFFFF;
            margin: -17px 0px 0px 31px;
        }
        .StrNews-3 {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 20px;
            color: #FFFFFF;
            margin: 17px 0px 0px 31px;
        }

        .StrNewsLeDel2 {
            width: 69px;
            height: 22px;
            line-height: 22px;
            font-weight: 400;
            font-size: 12px;
            margin: 31px 0px 0px 31px;
            background-color: #62c3d0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            color: #FFFFFF;
        }
    }
    .StrNewsLeft3 {
        width: 100%;
        background-image: url('../../assets/images/banner/bannerle.png');
        background-size: 100% 100%;
        height: 600px;
        /* height: 100%; */
        border: 1px solid #ccc;
        transition: all 1s ease;
        .StrNews-1 {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 32px;
            color: #FFFFFF;
            margin: 27px 0px 0px 31px;
            box-sizing: border-box;
        }
        .StrNews-2 {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 700;
            font-size: 26px;
            color: #FFFFFF;
            margin: -17px 0px 0px 31px;
        }
        .StrNews-3 {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 20px;
            color: #FFFFFF;
            margin: 17px 0px 0px 31px;
        }

        .StrNewsLeDel3 {
            width: 69px;
            height: 22px;
            line-height: 22px;
            font-weight: 400;
            font-size: 12px;
            margin: 31px 0px 0px 31px;
            background-color: #62c3d0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            color: #FFFFFF;
        }
    }
    .StrNewsLeft4 {
        width: 100%;
        background-image: url('../../assets/images/banner/bannerle.png');
        background-size: 100% 100%;
        height: 240px;
        border: 1px solid #ccc;
        transition: all 1s ease;
        .StrNews-1 {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 32px;
            color: #FFFFFF;
            margin: 27px 0px 0px 31px;
            box-sizing: border-box;
        }
        .StrNews-2 {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 700;
            font-size: 26px;
            color: #FFFFFF;
            margin: -17px 0px 0px 31px;
        }
        .StrNews-3 {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 20px;
            color: #FFFFFF;
            margin: 17px 0px 0px 31px;
        }

        .StrNewsLeDel4 {
            width: 69px;
            height: 22px;
            line-height: 22px;
            font-weight: 400;
            font-size: 12px;
            margin: 31px 0px 0px 31px;
            background-color: #62c3d0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            color: #FFFFFF;
        }
    }
    .Strongtitle {
        color: #3D3D3D;
        font-size: 42px;
        font-weight: 600;
        margin: 20px 0px 10px 0px;
        box-sizing: border-box;
    }

    @media screen and (max-width: 1200px) {
        .Strongtitle {
            color: #3D3D3D;
            font-size: 36px;
            font-weight: 600;
            margin: 20px 0px 10px 0px;
            box-sizing: border-box;
        }
    }

    @media screen and (max-width: 768px) {
        .Strongtitle {
            color: #3D3D3D;
            font-size: 30px;
            font-weight: 600;
            margin: 20px 0px 10px 0px;
            box-sizing: border-box;
        }
    }

    @media screen and (max-width: 500px) {
        .Strongtitle {
            color: #3D3D3D;
            font-size: 18px;
            font-weight: 600;
            margin: 20px 0px 10px 0px;
            box-sizing: border-box;
        }
    }

    .ProClassRowTwo {
        /* height: 200px; */
        /* background-color: pink; */
        /* box-shadow: 1px 1px 1px #FFF; */
        box-shadow: 0 1px 10px rgb(180 195 255 / 30%);
        border-radius: 3px;
        padding: 10px 15px;
        box-sizing: border-box;
        margin: 0px 10px 10px 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        border: 1px dashed #ccc;
    }

    .ProClassRowTwo:hover {
        transition: all 0.8s ease;

        /* 添加过渡效果 */
        background-color: #2966FF;
        color: #fff;
        h4,
        div,
        h5,
        p,
        span {
            color: #fff;
        }
        .MinMinBottom{
            background-color: #2966FF;
            border: 1px solid #fff;

        }
        .ProClsRowMinTx {
        span {
            border: 1px solid #ccc;
        }
    }
        cursor: pointer;
        box-shadow: 9px 9px 33px #d1d1d1,
        -9px -9px 33px #ffffff;
        transform: translateY(-2px);
    }

    .ProClsRowTwoTi {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        margin-top: 10px;
        img {
            width: 26px;
            margin-right: 5px;
        }
    }

    .ProClassRowContent {
        margin: 3px 0px;
        height: 40px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* 控制显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ProClsRowMinTx {
        span {
            display: inline-block;
            border: 1px solid #0d61ff;
            color: #0d61ff;
            margin:2px;
            border-radius: 2px;
            padding: 0px 1px;
            box-sizing: border-box;
        }
    }

    .MinMinBottom {
        width: 80px;
        background-color: #ffeeec;
        display: flex;
        align-items: center;
        height: 40px;
        margin: 10px 0px;
        color: #ff8a41;
        font-weight: 700;
        box-sizing: border-box;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

   
    .MinMinB-Bot {
        display: flex;
        align-items: flex-end;
        justify-content: left;
        font-size: 12px;
        color: #474646;
        position: relative;

        .MinMinB-Bot-1 {
            font-size: 30px;
            color: #cd3237;
            font-family: serif;
        }

        .MinMinB-Bot-1:hover {
            color: #FFF;
        }

        .MinMinB-Bot-2 {
            display: inline-block;

        }

        .MinMinB-Bot-3 {
            color: #fff;
            box-sizing: border-box;
            margin-left: 20px;
        }

    }

    .ChangeFenye {
        margin: 0px 0 20px 0;
        text-align: right;
    }
}

.el-menu.el-menu--horizontal {
    border-bottom: none;
    background-color: #fff;
    color: #000;
}

.el-menu--horizontal>.el-menu-item {
    color: rgba(0, 0, 0, 0.5);
}

.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover {
    background-color: var(--StrongBgc);
    transition: all 0.3s ease;

}

.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus {
    background-color: var(--StrongBgc);
    /* font-size: 16px; */
}

.el-menu--horizontal>.el-menu-item.is-active {
    color: #2966FF;
    font-size: 18px;
    font-weight: 700;

    border-bottom: 2px solid #2966FF;
    transition: 0.3s ease;
}

.el-menu--horizontal>.el-menu-item {
    padding: 0px 5px;
    margin: 0px 10px;
    height: 50px;
    line-height: 50px;
    transition: 0.5s ease;
}
.el-menu--horizontal>.el-menu-item:hover {
   font-size: 18px;
    color: #2966FF;
    font-weight: 700;
    transition:all 1s ease;
}

/* 分页切换背景颜色 */
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #2966ff;
}
</style>